<template>
  <div class='m-firmRole'>
    <div style='padding-bottom: 20px;'>
      <el-button type='primary' @click='showAddRoleBox'>添加角色</el-button>
    </div>
    <a-table :data='data' :cols='tableKeys'>
      <el-table-column align="center" label="操作" width='240' slot='ahead'>
        <template slot-scope="scope">
          <div class='m-firmRole-table-handle'>
            <el-button size='mini' @click='updateRole(scope.row, "cancel")'>修改</el-button>
            <el-button size='mini' @click='setEmployees(scope.row, "finish")'>设置员工</el-button>
            <el-button size='mini' @click='deleteRole(scope.row.id)'>删除</el-button>
          </div>
        </template>
      </el-table-column>
    </a-table>
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>

    <el-dialog
      title="修改角色信息"
      :visible.sync="dialogVisible"
      :before-close="() => { this.dialogVisible = false }">
      <el-form label-width="80px">
        <el-form-item label='角色名称' >
          <el-input type='text' v-model='setRoleName' />
        </el-form-item>
        <el-form-item label='权限列表'>
           <el-transfer v-model="roleHavePermission" 
             :titles="['候选权限', '已选权限']"
             :data="rolePermission">
          </el-transfer>
        </el-form-item>
        <el-form-item align='left'>
          <div class='dialog-btn'>
            <el-button type='primary' @click='updateRights'>更新权限</el-button>
            <div class='wrap'>
              <el-button type="primary" @click='dialogConfirm'>确定</el-button>
              <el-button @click='dialogVisible = false' >取消</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <employess-configure ref='dialog' 
      getStaffsPath='firmGetRolestaffs'
      getExStaffsPath='firmGetRolestaffs'
      addStaffPath='firmAddRoleStaff'
      deleteStaffPath='firmDeleteRoleStaff'
      :id='selectAid' 
      idKey='aRoleId'
      @close='closeDialog'>
    </employess-configure>
  </div>
</template>

<script>
import employessConfigure from '@/components/employessConfigure'

export default {
  name: 'firmRole',

  components: {
    employessConfigure
  },

  data() {
    return {
      tableKeys: [
        { prop: 'name', label: '角色名称', minWidth: '150' }
      ],
      data: [],
      ifRequesting: false,
      dialogVisible: false,
      rolePermission: [],
      roleHavePermission: [],
      setRoleName: '',
      dialogType: 'add',
      nameRegexp: /^.{1,10}$/,
      selectAid: ''
    }
  },

  mounted() {
    this.$refs.page.changePage()
  },

  methods: {
    async fetchData(aPageNum, aPageSize) {
      return this.$api.firmGetRole({
        aPageNum,
        aPageSize,
        aFirmId: this.aFirmId
      })
    },

    getData(data) {
      this.data = data
    },

    showAddRoleBox() {
      this.dialogType = 'add'
      this.dialogVisible = true
      this.roleHavePermission = []
      this.setRoleName = ''
      this.getRights()
    },

    async updateRoleRequest(name, aDeptId) {
      const { code } = await this.$api.firmUpdateRole({
        aDeptId,
        aDeptName: name
      })
      return code === 0
    },

    updateRole(v) {
      this.selectAid = v.id
      this.dialogType = 'modify'
      this.setRoleName = v.name
      this.getRoleRights()
      this.getRights()
      this.dialogVisible = true
    },

    deleteRole(aId) {
      if (this.ifRequesting) return false
      this.__messageBox({
        title: '你确认要删除该角色吗？',
        successCallback: async () => {
          this.ifRequesting = true
          const { code } = await this.$api.firmDeleteRole({ aId })
          this.ifRequesting = false
          this.$refs.page.changePage()
          return code
        }
      })
    },

    async getRights() {
      const { code, data } = await this.$api.firmGetRights({
        aFirmId: this.aFirmId
      })
      if (code === 0) {
        this.rolePermission = data.list.map(v => ({ key: v.id, label: v.name }))
      }
    },

    async getRoleRights() {
      const { code, data } = await this.$api.firmGetRights({
        aIsIncluded: 1,
        aRoleId: this.selectAid
      })
      if (code === 0) {
        this.roleHavePermission = data.list.map(v => v.id)
      }
    },

    async getRoleNotHaveRights() {
      const { code, data } = await this.$api.firmGetRights({
        aIsIncluded: 2,
        aRoleId: this.selectAid
      })
      if (code === 0) {
        this.rolePermission = data.list.map(v => ({ key: v.id, label: v.name }))
      }
    },

    async dialogConfirm() {
      if (this.ifRequesting) return false
      const setRoleName = this.setRoleName
      const ifAdd = this.dialogType === 'add'
      if (!this.nameRegexp.test(setRoleName)) {
        this.__notify('角色名字', '不能超过10或低于1个字符', 'warning')
        return false
      }
      this.ifRequesting = true
      const { code } = await this.$api[ifAdd ? 'firmCreateRole' : 'firmUpdateRole']({
        aId: ifAdd ? '' : this.selectAid,
        aFirmId: this.aFirmId,
        aName: setRoleName,
        aRights: this.roleHavePermission.map(v => ({ aId: v }))
      })
      this.ifRequesting = false
      if (code === 0) {
        this.setRoleName = ''
        this.roleHavePermission = []
        this.dialogVisible = false
        this.$refs.page.changePage()
      }
    },

    setEmployees({ id }) {
      this.selectAid = id
      this.$refs.dialog.show()
    },

    closeDialog() {
      this.$refs.page.changePage()
    },

    async updateRights() {
      const { code, data } = this.$api.firmUpdateRights()
      if (code === 0) {
        this.rolePermission = data.list.map(v => ({ key: v.id, label: v.name }))
      }
    }
  }
}
</script>

<style lang='less'>
.m-firmRole {
  .dialog-btn {
    display: flex;
    justify-content: space-between;
    .wrap {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>